<template>
    <div class="busLine-by-stopId">
        <div class="back-btn" @click="$router.back(-1)">
            <van-icon name="arrow-left" style="color:#fff;"/>
        </div>
        <gmap-map
            :center="center"
            :zoom="11"
            :options="mapControls"
            :style="mapStyle"
            v-show="loadingData"
            ref="map"
        >
            <gmap-marker
                v-show="userMarkers.lat && userMarkers.lng"
                key="user-location"
                :position="userMarkers"
                :icon="userLocationIcon"
            ></gmap-marker>
            <gmap-marker
                :key="'index_items_' + index"
                v-for="(items, index) in linePaths"
                :position="items.lines_latlng[0]"
                :label="items.labels"
                :icon="icon1"
            ></gmap-marker>
            <gmap-marker
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                :icon="icon"
                @click="showInfoWin(m)"
            ></gmap-marker>
            <GmapInfoWindow
                :opened="infoWinOpen"
                :position="infoWindowPos"
                @closeclick="closeClick"
            >
                <div class="info-title" @click="getBusLineListByStop(infoWindowStopId)">
                    <div class="title-left" v-if="infoWindowLineNub == '9693'">Walk </div>
                    <div class="title-left g-font" v-else>Bus No : {{infoWindowLineNub}}</div>
                    <div class="title-right"></div>
                </div>
                <div class="g-font">{{infoWindowTitle}}</div>
            </GmapInfoWindow>
            <!--<GmapInfoWindow-->
                <!--v-for="(items, index) in linePaths"-->
                <!--:position="items.lines_latlng[0]"-->
                <!--class="info-windows"-->
            <!--&gt;-->
                <!--<div>-->
                    <!--{{items.line_no}}-->
                <!--</div>-->
            <!--</GmapInfoWindow>-->
            <gmap-polyline
                v-for="(items, index) in linePaths"
                :key="'index_' + index"
                :options="items.options"
                :path="items.lines_latlng"
            ></gmap-polyline>
        </gmap-map>
        <van-swipe @change="lineChange" :initial-swipe="initialSwipe" class="swipe-box" :loop="false">
            <van-swipe-item
                v-for="(items, index) in responseData"
                :key="'line_' + index">
                <div class="title-box">
                    <div class="title-left">{{items.stops}} stops / {{items.distance.toFixed(2)}} km</div>
                    <div class="title-right">{{getLineTimes(items.time)}}</div>
                </div>
                <div class="lines-box" @click="linesPopShow = true">
                    <div class="lines-item"  v-for="(item, i) in items.lines"
                         :key="'line_info' + i">
                        <div class="icon-box" v-if="item == 9693">
                            <i class="icon icon-walk-green"></i>
                        </div>
                        <div class="item-line" v-else :style="'background-color:' + items.colors[i]">{{parseInt(item)}}</div>
                    </div>
                    <div class="right-more"></div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <!--请求的经过某站点的路线集合弹出层-->
        <van-popup v-model="busLineListShow" class="bus-line-pop">
            <div class="list-loading" v-if="listLoading || stopLoading">
                <van-loading type="spinner" />
            </div>
            <div class="line-list-box" v-else :style="popHeight">
                <div class="line-list-title" v-if="stopInfo">
                    <div class="line-title">{{this.translateString(stopInfo.nameMm) + ' - ' + stopInfo.nameEn}}</div>
                    <div class="line-info">{{this.translateString(stopInfo.roadMm) + ' - ' + stopInfo.roadEn}}</div>
                    <div class="line-info">{{this.translateString(stopInfo.townshipMm) + ' - ' + stopInfo.townshipEn}}</div>
                </div>
                <div class="line-list-outbox">
                    <div class="line-list-inbox">
                        <div class="stop-list-item" v-for="(items, index) in busLineList" :key="index" @click="goToOtherLineData(items)">
                            <div class="item-left" :style="'background-color:' + items.color">{{getLineNum(items.lineNum)}}</div>
                            <div class="item-right">
                                <div class="item-title">{{getLineNumStr(items.lineNum)}}</div>
                                <div class="item-info" v-if="items.start">{{translateString(items.start)}}</div>
                                <div class="item-info" v-if="items.end">{{translateString(items.end)}}</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </van-popup>
        <!--站点列表-->
        <van-popup class="modal" v-model="linesPopShow" position="right" :overlay="false">
            <div class="page-category">
                <van-nav-bar
                    title=" "
                    class="filter-title"
                    left-arrow
                    @click-left="linesPopShow = false"
                />
                <van-list>
                    <!--<van-cell v-for="(items, index) in markers" :key="'line_stops_' + index" :title="items.info.name + ''" />-->
                    <div class="line-list-outbox">
                        <div class="line-list-inbox">
                            <div class="stop-list-item" v-for="(items, index) in markers" :key="'line_stops_' + index">
                                <div class="item-left" v-if="index == 0">
                                    <i class="icon icon-location"></i>
                                </div>
                                <div class="item-left" v-else-if="items.info.line_no == 9693">
                                    <i class="icon icon-walk-pink"></i>
                                </div>
                                <div class="item-left" v-else :style="'background-color:' + items.info.color" >{{getLineNum(items.info.line_no)}}</div>
                                <div class="item-right">
                                    <div class="item-title">{{getLineNumStr(items.info.line_no)}}</div>
                                    <div class="item-info">{{getTranslationName(items.info, 'stop')}}</div>
                                    <div class="item-info">{{getTranslationName(items.info, 'road')}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {getBusRoute, busRouteDetail, busLineListByStop, busLineByTwoId, getStopDetail} from '../../static/api/mgc_api'
    import {gmapApi} from 'vue2-google-maps'
    export default {
        name: "GoogleMapByStop",
        computed: {
            google: gmapApi
        },
        data() {
            return {
                responseData: [], // 后台返回的lines原始数据
                center: {lat: 16.869607, lng: 96.195590},
                markers: [],
                mapControls: {
                    disableDefaultUI: true,
                    zoomControl: true,
                },
                mapStyle: {
                    width: '100%',
                    height: '0',
                },
                popHeight: {
                    maxHeight: '0',
                },
                currentPlace: null,
                linePaths:[],
                options: {
                    strokeColor: '#415cab',
                    strokeOpacity: 0.9,
                    strokeWeight: 3,
                },
                icon: {
                    path: 0,
                    fillColor: '#ff9a02',
                    fillOpacity: 0.9,
                    scale: 6,
                    strokeColor: '#fff',
                    strokeOpacity: 0.9,
                    strokeWeight: 2
                },
                icon1: {
                    url: '/static/img/images/pop1.png',
                    scaledSize: {
                        width: 40,
                        height: 30,
                    },
                },
                infoWinOpen: false,
                infoWindowPos: null,
                infoWindowTitle: '',
                infoWindowLineNub: '',
                loadingData: true,
                busLineName: '',
                busLineNo: '',
                tabWidth: 0,
                headBackColor: {
                    backgroundColor: '',
                },
                busLineListShow: false,
                listLoading: false,
                stopLoading: false,
                stopInfo: {},//某个站点详情
                busLineList: [],
                initialSwipe: 0,
                linesPopShow: false,
                userMarkers: {lat: 0, lng: 0},
                userLocationIcon: {
                    path: 0,
                    fillColor: '#448AFF',
                    fillOpacity: 0.9,
                    scale: 6,
                    strokeColor: '#fff',
                    strokeOpacity: 0.9,
                    strokeWeight: 1
                },
            };
        },
        methods: {
            closeClick() {
                this.infoWinOpen = false;
                return false;
            },
            showInfoWin(val) {
                this.infoWindowPos = val.position;
                this.infoWindowTitle = this.getTranslationName(val.info, 'stop');
                this.infoWindowLineNub = val.info.line_no;
                this.infoWindowStopId = val.info.stop_no;
                this.infoWinOpen = true;
            },
            getLineTimes(val) {
                let h = ''
                let m = ''
                let str = ''
                let time = Math.ceil(val)
                if (time > 60) {
                    h = parseInt(val/60)
                    m = time - h*60
                    str = h + ' hour ' + m + ' minutes'
                } else {
                    m = time
                    str = m + ' minutes'
                }
                return str
            },
            getRoute() {
                let searchForm = {};
                searchForm.sort = 'create_datetime desc';
                searchForm.lineNumber = 35;
                searchForm.pageNum = 1;
                searchForm.pageSize = 10;
                getBusRoute(searchForm).then((res) => {
                    if (res.data.data.errorID == 0) {
                        let _id = res.data.data.object.list[0].id;
                        this.options.strokeColor = res.data.data.object.list[0].color;
                        this.headBackColor.backgroundColor = res.data.data.object.list[0].color;
                        this.busLineName  = 'YBS ' + res.data.data.object.list[0].lineNum;
                        this.busLineNo = res.data.data.object.list[0].lineNum;
                        this.getBusRouteDetail(_id);
                    } else {
                        this.$toast(res.data.data.message)
                    }
                }).catch((error) => {
                    console.log(error)
                    this.$toast('error,please try again later')
                })
            },
            // 获取到lines数据后，初始化某个index的线路
            changeLine(data, index){
                let stopArr = data[index].stop_list
                // 画公交线需要的数据
                let stopArrData = stopArr
                let stopArrData1 = stopArr
                let lineArr = data[index].lines
                let colors = data[index].colors
                let linesData = []

                for (let a=0;a<lineArr.length;a++){
                    let _name = lineArr[a]
                    // 9693 --> 步行
                    if (_name == "9693") {
                        linesData[a] = {
                            options: {
                                strokeColor: "#795548",
                                strokeOpacity: 0.9,
                                strokeWeight: 3,
                            },
                            labels: {
                                text: 'Walk',
                                color: "#795548",
                            },
                            line_no: _name,
                            lines_latlng: []
                        }
                    } else {
                        let labelName = this.getLineNum(_name)
                        linesData[a] = {
                            options: {
                                strokeColor: colors[a],
                                strokeOpacity: 0.9,
                                strokeWeight: 3,
                            },
                            labels: {
                                text: labelName,
                                color: colors[a],
                            },
                            line_no: _name,
                            lines_latlng: []
                        }
                    }
                    for (let i=0; i<stopArrData.length; i++){
                        let name_1 = stopArrData[i].line_no
                        if (name_1 == _name) {
                            let _o = {
                                lat : Number(stopArrData[i].lat),
                                lng : Number(stopArrData[i].lng),
                            };
                            linesData[a].lines_latlng.push(_o)
                        }
                        if (i <= stopArrData.length-2 ) {
                            let name_2 = stopArrData[i+1].line_no
                            if (name_1 == _name && name_2 != _name) {
                                stopArrData = stopArrData.slice(i+1)
                                break;
                            }
                        }
                    }

                    if (a==0) { //第一条线时将起始点【line_no == '0'】数据插入
                        let _o = {
                            lat : Number(stopArr[0].lat),
                            lng : Number(stopArr[0].lng),
                        };
                        linesData[a].lines_latlng.unshift(_o)
                    } else {//插入上条线路的最后一条数据作为线路开始点
                        let l = linesData[a-1].lines_latlng.length
                        let _o = linesData[a-1].lines_latlng[l-1]
                        linesData[a].lines_latlng.unshift(_o)
                    }

                }
                this.linePaths = linesData

                // 站点数据
                const bounds = new google.maps.LatLngBounds()
                for (let a=0;a<lineArr.length;a++){
                    let _name = lineArr[a]
                    for (let i=0; i<stopArrData1.length; i++){
                        let name_1 = stopArrData1[i].line_no
                        let _o = {
                            lat : Number(stopArrData1[i].lat),
                            lng : Number(stopArrData1[i].lng),
                        };
                        let _i = {
                            line_no: stopArrData1[i].line_no,
                            stop_en: stopArrData1[i].stop_en,
                            stop_mm: stopArrData1[i].stop_mm,
                            road_en: stopArrData1[i].road_en,
                            road_mm: stopArrData1[i].road_mm,
                            stop_no: stopArrData1[i].stop_no,
                            color: colors[a],
                        };
                        if (stopArrData1[i].line_no == '0') {
                            _i.line_no = stopArrData1[i+1].line_no
                        }
                        let markersInfo = {
                            position: _o,
                            info: _i
                        };
                        // if (i == parseInt(stopArr.length/4) ){
                        //     this.center = _o // 用下面的fitBound代替此功能
                        // }
                        bounds.extend(_o)
                        this.markers.push(markersInfo);
                        if (i <= stopArrData1.length-2 ) {
                            let name_2 = stopArrData1[i+1].line_no
                            if (name_1 == _name && name_2 != _name) {
                                stopArrData1 = stopArrData1.slice(i+1)
                                break;
                            }
                        }
                    }
                }
                this.$refs.map.fitBounds(bounds)
                // this.loadingData = true;
            },
            getBusLineByTwoId(startStopId, endStopId) {

                busLineByTwoId(startStopId, endStopId).then((res) => {
                    if (res.data && res.data.length > 0) {
                        this.responseData = res.data
                        this.$nextTick(() => {
                            this.$refs.map.$mapPromise.then((map) => {
                                this.loadingData = true; // 不能v-show='loadingData = false' this.$refs.map.fitBound不生效，或者导致rooms混乱
                                this.changeLine(this.responseData, this.initialSwipe)
                                this.initDom(map)
                            })
                        })
                    } else {
                        this.$toast(res.data.data.message)
                    }
                }).catch((error) => {
                    console.log(error)
                    this.$toast('error,please try again later')
                })
            },
            initDom(map){
                let controlDiv = document.createElement('div');

                let firstChild = document.createElement('button');
                firstChild.style.backgroundColor = '#fff';
                firstChild.style.border = 'none';
                firstChild.style.outline = 'none';
                firstChild.style.width = '28px';
                firstChild.style.height = '28px';
                firstChild.style.borderRadius = '2px';
                firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
                firstChild.style.cursor = 'pointer';
                firstChild.style.marginRight = '10px';
                firstChild.style.padding = '0px';
                firstChild.title = 'Your Location';
                controlDiv.appendChild(firstChild);

                let secondChild = document.createElement('div');
                secondChild.style.margin = '5px';
                secondChild.style.width = '18px';
                secondChild.style.height = '18px';
                secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)';
                secondChild.style.backgroundSize = '180px 18px';
                secondChild.style.backgroundPosition = '0px 0px';
                secondChild.style.backgroundRepeat = 'no-repeat';
                secondChild.id = 'you_location_img';
                firstChild.appendChild(secondChild);
                controlDiv.index = 1;
                google.maps.event.addListener(map, 'dragend', () => {
                    let doc = document.getElementById('you_location_img')
                    doc.style.backgroundPosition = '0px 0px'
                });
                firstChild.addEventListener('click', () => {
                    let doc = document.getElementById('you_location_img')
                    let imgX = '0';
                    let animationInterval = setInterval( () =>{
                        if(imgX == '-18') imgX = '0';
                        else imgX = '-18';
                        doc.style.backgroundPosition = imgX+'0px 0px'
                    }, 500);
                    if(navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition( (position) => {
                            // let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                            let latlng = {lat: position.coords.latitude, lng: position.coords.longitude};
                            this.userMarkers = latlng;
                            map.setCenter(latlng);
                            clearInterval(animationInterval);
                            doc.style.backgroundPosition = '-144px 0px'
                        });
                    }
                    else{
                        clearInterval(animationInterval);
                        doc.style.backgroundPosition = imgX+'0px 0px'
                    }
                });
                map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
            },
            initRoute(querys) {
                if (!querys) return false
                let  queryInfo= JSON.parse(querys)

                this.options.strokeColor = queryInfo.color;
                this.headBackColor.backgroundColor = queryInfo.color;
                this.busLineName = queryInfo.lineNum;
                this.busLineNo = queryInfo.lineNum;
                let _id = queryInfo.id;
                this.getBusRouteDetail(_id);
            },
            // getBusRouteDetail(id) {
            //     busRouteDetail(id).then((res) => {
            //         if (res.data.data.errorID == 0) {
            //             let stopArr = res.data.data.object;
            //
            //             for (let i=0; i<stopArr.length; i++){
            //                 let _o = {
            //                     lat : Number(stopArr[i].lat),
            //                     lng : Number(stopArr[i].lng),
            //                 };
            //                 let _i = {
            //                     id: stopArr[i].id,
            //                     nameEn: stopArr[i].nameEn,
            //                     nameMm: stopArr[i].nameMm,
            //                     roadEn: stopArr[i].roadEn,
            //                     roadMm: stopArr[i].roadMm,
            //                     townshipEn: stopArr[i].townshipEn,
            //                     townshipMm: stopArr[i].townshipMm,
            //                     selectedDate: stopArr[i].selectedDate,
            //                     status: stopArr[i].status,
            //                 };
            //                 let markersInfo = {
            //                     position: _o,
            //                     info: _i
            //                 };
            //                 if (i == parseInt(stopArr.length/4) ){
            //                     this.center = _o
            //                 }
            //                 this.markers.push(markersInfo);
            //                 this.linePath.push(_o);
            //                 this.loadingData = true;
            //             }
            //         }else {
            //             // this.$toast(res.data.message)
            //         }
            //     }).catch((error) => {
            //         console.log(error)
            //         this.$toast('error,please try again later')
            //     })
            // },
            getBusLineListByStop(id) {

                this.busLineListShow = true;
                this.listLoading = true;
                this.stopLoading = true;
                this.busLineList = []
                let searchForm = {};
                searchForm.stopId = id;
                busLineListByStop(searchForm).then((res) => {
                    if (res.data.data.errorID == 0) {
                        this.busLineList = res.data.data.object
                    } else {
                        this.$toast(res.data.data.message)
                    }
                    this.listLoading = false;
                }).catch((error) => {
                    console.log(error)
                    this.listLoading = false;
                    this.$toast('error,please try again later')
                })

                getStopDetail(id).then((res) => {
                    if (res.data.data.errorID == 0) {
                        this.stopInfo = res.data.data.object
                    } else {
                        this.$toast(res.data.data.message)
                    }
                    this.stopLoading = false;
                }).catch((error) => {
                    console.log(error)
                    this.stopLoading = false;
                    this.$toast('error,please try again later')
                })
            },
            lineChange(e) {
                this.markers = []
                this.linePaths = []
                this.infoWinOpen = false
                this.$nextTick(() => {
                    this.$refs.map.$mapPromise.then(() => {
                        this.loadingData = true; // 不能v-show='loadingData = false' this.$refs.map.fitBound不生效，或者导致rooms混乱
                        this.changeLine(this.responseData, e)
                    })
                })
            },
            translateString(str){
                if (!str) return
                return this.$translateLang(str,'unicodeTozawgyi');
            },
            getTranslationName(parent, name) {
                if (!parent) return
                let nameStr = name
                if (this.$store.state.store.localLang == 'MM') {
                    nameStr = nameStr + '_mm'
                    return this.$translateLang(parent[nameStr],'unicodeTozawgyi')
                } else {
                    nameStr = nameStr + '_en'
                    return parent[nameStr]
                }
            },
            getLineNum(lineStr) {
                let str = lineStr;
                let _start = lineStr.indexOf("(");
                if (_start != -1) {
                    str = lineStr.substring(0, _start)
                }
                return str
            },
            getLineNumStr(lineStr) {
                let str = '';
                if (!lineStr) return
                let _start = lineStr.indexOf("(");
                let _end = lineStr.indexOf(")");
                if (_start != -1 && _end != -1) {
                    str = lineStr.substring(_start, _end+1)
                    str = this.$translateLang(str,'unicodeTozawgyi');
                    // if(this.$store.state.store.localLang == 'MM'){
                    //     str = this.$translateLang(str,'unicodeTozawgyi');
                    // }
                }
                return str
            },
            goToOtherLineData(info) {
                this.busLineListShow = false
                let path = '/map-details/lineid-detail'
                let queryObj = {
                    lineInfo: JSON.stringify(info),
                };
                this.$router.push({
                    path: path,
                    query:queryObj,
                })
            }
        },
        mounted() {
            this.mapStyle.height = document.body.clientHeight - 90 + 'px';
            this.popHeight.maxHeight = document.body.clientHeight - 40 + 'px';

            let startStopId = this.$route.query.startStopId || 3059
            let endStopId = this.$route.query.endStopId || 813
            this.initialSwipe = Number(this.$route.query.linesIndex) || 0
            this.getBusLineByTwoId(startStopId, endStopId);
        },
        // watch: {
        //     '$route' (to, from) {
        //         // 路由参数发生变化时
        //         if (this.$route) {
        //             this.markers = []
        //             this.linePaths = []
        //             if (this.$route.query.lineInfo) {
        //                 this.initRoute(this.$route.query.lineInfo);
        //             }
        //         }
        //     },
        // },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            // console.log(to,'to')
            let leave = true;
            if (this.busLineListShow) {
                this.busLineListShow = false
                leave = false
            }
            if (this.linesPopShow) {
                this.linesPopShow = false
                leave = false
            }
            if (leave) {
                next()
            } else {
                next(false)
            }
        },
        beforeRouteUpdate (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            // console.log(to,'to')
            let leave = true;
            if (this.busLineListShow) {
                this.busLineListShow = false
                leave = false
            }
            if (this.linesPopShow) {
                this.linesPopShow = false
                leave = false
            }
            if (leave) {
                next()
            } else {
                next(false)
            }
        },

    };
</script>
<style>
    /*.busLine-by-stopId .van-nav-bar{*/
        /*background-color: #fff;*/
        /*!*background-color: #f2f2f2;*!*/
        /*color: #333;*/
        /*z-index: 9;*/
    /*}*/
    /*.busLine-by-stopId .van-nav-bar .van-icon{*/
        /*color: #C8C8C8;*/
        /*margin-right: 15px;*/
        /*font-size: 18px;*/
    /*}*/
    /*.busLine-by-stopId .van-nav-bar .van-nav-bar__title{*/
        /*color: #333;*/
    /*}*/
    /*.van-tabs__nav .van-tab{*/
        /*border-right: 1px solid #eee;*/
    /*}*/
    /*.van-tabs__nav .van-tab:last-child{*/
        /*border-right: none;*/
    /*}*/
    .busLine-by-stopId .van-nav-bar .van-icon{
        color: #C8C8C8;
        margin-right: 15px;
        font-size: 18px;
    }
    .bus-line-pop.van-popup{
        width: 85%;
        /*max-height: 90%;*/
        border-radius: 4px;
    }
    .bus-line-pop .van-loading{
        display: inline-block;
    }
    .busLine-by-stopId .van-popup--right{
        left: 0;
    }
</style>
<style scoped>
    .g-font {
        font-family: Zawgyi-One, 'Avenir', Helvetica, Arial, sans-serif!important;
    }
    .info-title{
        display: flex;
    }
    .info-title .title-left{
        color: #ff4181;
        flex: 1;
    }
    .info-title .title-right{
        width: 10px;
        margin-left: 15px;
        position: relative;
    }
    .info-title .title-right:before{
        content: "";
        position: absolute;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        width: 7px;
        height: 7px;
        top: 50%;
        left: 50%;
        margin-left: -5px;
        margin-top: -4px;
        transform: rotate(45deg);
    }
    .stop-list-item {
        display: flex;
        align-items: center;
        /*padding: 4% 8px;*/
        /*border-bottom: 1px solid #eee;*/

        padding: 4px;
        border: 1px solid #eee;
        margin: 8px 2%;
        border-radius: 4px;
        box-shadow:2px 2px 3px #ddd;
    }
    .stop-list-item:active{
        background: #eee;
    }
    .item-left{
        width: 60px;
        height: 60px;
        background: #fff;
        line-height: 60px;
        text-align: center;
        color: #fff;
    }
    .item-right{
        flex: 1;
        margin-left: 10px;
    }
    .item-right .item-title{
        color: rgb(219, 55, 67);
    }
    .list-loading{
        width: 100%;
        text-align: center;
        padding: 15px 0;
    }
    .line-list-box{
        height: 100%;
        padding: 8px 3%;
        display: flex;
        flex-flow: column;
        overflow: hidden;
    }
    .line-list-title{
        /*position: absolute;*/
        /*top: 8px;*/
        /*left: 3%;*/
        /*right: 3%;*/
    }
    .line-list-title .line-title{
        color: rgb(219, 55, 67);
        font-size: 16px;
    }
    .line-list-outbox{
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .back-btn {
        position: absolute;
        top: 10px;
        left: 12px;
        width: 34px;
        height: 34px;
        background: rgba(0, 0, 0, .5);
        z-index: 99;
        padding: 9px 8px;
        border-radius: 17px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .swipe-box{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 90px;
        box-shadow:0px -2px 3px #ddd;
    }
    .title-box{
        display: flex;
        padding: 8px 4% 4px;
    }
    .title-box .title-left{
        flex: 1;
    }
    .title-box .title-right{
        text-align: right;
        flex: 1;
        color: #ff4181;
    }
    .lines-box {
        display: flex;
        padding: 0 4%;
    }
    .lines-item {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .lines-item .icon-box, .lines-item .item-line{
        width: 100%;
        height: 100%;
    }
    .lines-item .icon-box .icon{
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .lines-item .icon-box .icon.icon-walk-green{
        background-position: 0 -127px;
    }
    .item-left .icon{
        width: 80%;
        height: 80%;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .item-left .icon.icon-walk-pink{
        background-position: 0 -254px;
    }
    .item-left .icon.icon-location{
        background-position: 0 -103px;
    }
    .lines-item .item-line{
        color: #fff;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
    }
    .lines-box .right-more{
        flex: 1;
        position: relative;
    }
    .lines-box .right-more:before{
        content: "";
        position: absolute;
        border-top: 1px solid #666;
        border-right: 1px solid #666;
        width: 7px;
        height: 7px;
        top: 50%;
        right: 5%;
        margin-left: -5px;
        margin-top: -4px;
        transform: rotate(45deg);
    }

</style>
